<template>
    <div id="style1">
        <el-form-item label="推荐1">
            <el-autocomplete
                    class="inline-input"
                    style="width: 100%"
                    v-model="one"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入小说名"
                    @select="((item) => {handleSelect(item, 1)})"
            ></el-autocomplete>
        </el-form-item>
        <el-form-item label="推荐2">
            <el-autocomplete
                    class="inline-input"
                    style="width: 100%"
                    v-model="two"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入小说名"
                    @select="((item) => {handleSelect(item, 2)})"
            ></el-autocomplete>
        </el-form-item>
    </div>
</template>

<script>
    export default {
        name: "style1",
        data() {
            return {
                one: '',
                two: '',
                restaurants: '',
                oneId: '',
                twoId: '',
                anId: '',
            }
        },
        created() {
            this.loadAll()
        },
        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item, index) {
                if (index == 1) {
                    this.oneId = item.id;
                } else if (index == 2) {
                    this.twoId = item.id;
                }
                this.anId = this.oneId + ',' + this.twoId;
                this.$emit('chooseData', this.anId)
            },
            loadAll() {
                this.$axios.post("admin/novel/getAll", '').then((res) => {
                    let anId = this.$store.state.novelData;
                    this.oneId = anId.split(',')[0];
                    this.twoId = anId.split(',')[1];
                    this.restaurants = res.data;
                    this.restaurants.map((num) => {
                        num.value = num.title;
                        if (this.oneId == num.id) {
                            this.one = num.title
                        }
                        if (this.twoId == num.id) {
                            this.two = num.title
                        }
                    })
                });
            },
        }
    }
</script>

<style scoped>

</style>